{% load static %}
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 引入核心的css文件 -->
    <link href="{% static "layui/css/layui.css" %}" rel="stylesheet" media="all">
    <!-- 引入核心的js文件-->
    <script src="{% static "layui/layui.js" %}"></script>
    <!-- 新 Bootstrap5 核心 CSS 文件 -->
    <link rel="stylesheet" href="{% static "css/bootstrap.min.css" %}" type="text/css">
    <script src="{% static "js/jquery-3.6.0.min.js" %}"></script>

    <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
    <script type="text/javascript" src="{% static "js/bootstrap.min.js" %}"></script>

    <title>Document</title>


    <style>
        .layui-form-label {
            width: 150px !important;
            text-align: center !important;
        }

        .layui-input {
            width: 280px;
        }

    </style>
</head>
<body>
<!-- 添加和修改的弹出层开始 -->

<div id="saveOrUpdateDiv">

    <form class="layui-form" action="" lay-filler="dataFrm" id="dataFrm">
        {% csrf_token %}

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">姓名:</label>
                <div class="layui-input-inline">
                    <!-- 隐藏的 input 框   <input type="hidden" > -->
                    <input type="hidden" class="layui-input userid" name="userid">
                    <input type="text" required="required" autocomplete="off"
                           class="layui-input user_name" name="user_name">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">邮箱:</label>
                <div class="layui-input-inline">
                    <input type="text" lay-verify="required|email" required="required" autocomplete="off"
                           class="layui-input user_email" name="user_email">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">是否是管理员:</label>
                <div class="layui-input-block  ">
                    <input type="radio" name="sup_work_or_no" value="1" title="是">
                    <input type="radio" name="sup_work_or_no" value="0" title="否">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">是否激活:</label>
                <div class="layui-input-block  ">
                    <input type="radio" name="act_work_or_no" value="1" title="是">
                    <input type="radio" name="act_work_or_no" value="0" title="否">
                </div>
            </div>


        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button"
                        class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal layui-icon layui-icon-ok"
                        lay-submit="" lay-filter="updateSubmit">修改
                </button>
                <button type="reset"
                        class="layui-btn layui-btn-lg layui-btn-radius layui-btn-danger  layui-icon  layui-icon-refresh">
                    重置
                </button>

            </div>
        </div>
    </form>
</div>

<script type="text/javascript">

    //全局定义一次, 加载formSelects  这玩意好像都没使用到
    layui.config({
        base: "{%static '/js/' %}" //此处路径请自行处理, 可以使用绝对路径
    }).extend({
        formSelects: 'formSelects'
    });

    layui.use(['form', 'layer', 'table', "formSelects", 'laytpl', 'laydate'], function () {
        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : top.layer,
            $ = layui.jquery,
            laytpl = layui.laytpl,
            table = layui.table,
            laydate = layui.laydate;
        var formSelects = layui.formSelects;

        form.on("submit(updateSubmit)", function (data) {
            // 校验   邮箱是否符合规定
            form.verify({
                 email: function (value) {
                    if (value != "") {  //值不是空的时候再去走验证
                        if (!/^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$|^1[3|4|5|7|8]\d{9}$/.test(value)) {
                            return '邮箱格式不正确';
                        }
                    }
                }
            });

            //弹出loading
            // 实际使用时的提交信息
            var userid = $('.userid').val();

            var user_name = $('.user_name').val();
            var user_email = $('.user_email').val();
            var user_is_superuser = $('input[name="sup_work_or_no"]:checked').val();
            // 通过 radio 的 name  选择器
            var user_is_active = $('input[name="act_work_or_no"]:checked').val();

            var csrf_token = $("input[name='csrfmiddlewaretoken']").val();

            //弹出loading
            var index = layer.msg('数据提交中，请稍候', {icon: 16, time: false, shade: 0.8});
            $.ajax({
                url: "/edituser/",
                // data:$("#dataFrm").serialize(),
                data: {
                    "userid": userid,
                    "user_name": user_name,
                    "user_email": user_email,
                    "user_is_superuser": user_is_superuser,
                    "user_is_active": user_is_active,
                    'csrfmiddlewaretoken': csrf_token,
                },
                type: "post",
                success(res) {
                    if (res.code === 200) {
                        layer.msg("操作成功！", {icon: 6});
                    }
                },
                error() {
                    layer.msg("操作失败！", {icon: 5});
                }
            });
            setTimeout(function () {
                layer.closeAll(index);
                layer.closeAll("updateuser.html");
                //刷新父页面
                parent.location.reload();
            }, 1000);
            return false;
        });
    });
</script>
</body>
</html>
